import {Alert, Checkbox} from 'antd';
import React, {useState} from 'react';
import {connect, Dispatch} from 'umi';
import {StateType} from '@/models/login';
// @ts-ignore
import {LoginParamsType} from '@/services/login';
import {ConnectState} from '@/models/connect';
import LoginForm from './components/Login';

import styles from './style.less';
import {DefaultFooter} from "@ant-design/pro-layout";

const {Tab, UserName, Password, Submit} = LoginForm;

interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string;
}> = ({content}) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);
const DefaultFooterDom = () => {
  return <DefaultFooter
    copyright={`${new Date().getFullYear()} 陕西加速想象力教育科技有限公司`}
    links={[
      {
        key: 'Think',
        title: 'Think',
        href: 'https://arvroffer.com/',
        blankTarget: true,
      },
      {
        key: 'beian',
        title: '陕ICP备17022044号',
        href: 'https://beian.miit.gov.cn/',
        blankTarget: true,
      }
    ]}
  />
}
const Login: React.FC<LoginProps> = (props) => {
  const {userLogin = {}, submitting} = props;
  // @ts-ignore
  const {status, type: loginType} = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState<string>('account');
  const handleSubmit = (values: LoginParamsType) => {

    const {dispatch} = props;
    dispatch({
      type: 'login/login',
      payload: {...values, type},
    });
  };
  return (
    <div className={styles.main}>
      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
        <Tab key="account" tab="账户密码登录">
          {status === 'error' && type === 'account' && (
            <LoginMessage content="账户或密码错误"/>
          )}

          <UserName
            name="username"
            placeholder="用户名: 请输入用户名"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <Password
            name="password"
            placeholder="密码: 请输入密码"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </Tab>
        {/* <Tab key="mobile" tab="手机号登录">
          {status === 'error' && loginType === 'mobile' && !submitting && (
            <LoginMessage content="验证码错误"/>
          )}
          <Mobile
            name="mobile"
            placeholder="手机号"
            rules={[
              {
                required: true,
                message: '请输入手机号！',
              },
              {
                pattern: /^1\d{10}$/,
                message: '手机号格式错误！',
              },
            ]}
          />
          <Captcha
            name="captcha"
            placeholder="验证码"
            countDown={120}
            getCaptchaButtonText=""
            getCaptchaSecondText="秒"
            rules={[
              {
                required: true,
                message: '请输入验证码！',
              },
            ]}
          />
        </Tab> */}
        <div>
          <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
            自动登录
          </Checkbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
        <Submit loading={submitting}>登录</Submit>
        {/* <div className={styles.other}>
          其他登录方式
          <AlipayCircleOutlined className={styles.icon}/>
          <TaobaoCircleOutlined className={styles.icon}/>
          <WeiboCircleOutlined className={styles.icon}/>
          <Link className={styles.register} to="/user/register">
            注册账户
          </Link>
        </div> */}
      </LoginForm>
      <div style={{position: "absolute", bottom: 0, width: "100%", left: 0}}>
        <DefaultFooterDom/>
      </div>
    </div>
  );
};

export default connect(({login, loading}: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
